<template>
  <div class="member-list">
    <!--    用户管理-用户列表-->
    <BasicTable @register="registerTable">
      <template #toolbar>
        <Button :type="'primary'" @click="handleAdd">新增</Button>
      </template>
      <template #action="{ record }">
        <a @click="handleUpdatePassword(record.id)">修改密码</a>
      </template>
      <template #authAccountList="{ value }">
        <div v-for="item in value || []">
          {{ authAccountType(item['authAccountType']) }}：{{ item.value }}
        </div>
      </template>
    </BasicTable>

    <UserModal @register="registerModal" @success="handleSuccess" />
  </div>
</template>

<script setup lang="ts">
  import UserModal from './modal.vue';
  import { Button } from 'ant-design-vue';
  import mcApi from 'mc-c2b2m-operator-api';
  import { computed, onActivated } from 'vue';
  import { useModal } from '@/components/Modal';
  import { tableColumns, tableFormSchema } from './data';
  import { authAccountTypeList } from '@/enums/systemEnum';
  import { BasicTable, useTable } from '@/components/Table';
  import { useTableAction } from '@/hooks/web/useTableAction';

  defineOptions({
    name: 'UserList',
  });

  const { SystemModule } = mcApi;
  const { UserApi } = SystemModule;
  const { getActionColumn, handleFetchDateParams } = useTableAction();

  const [registerTable, { reload }] = useTable({
    striped: false,
    bordered: false,
    immediate: false,
    useSearchForm: true,
    columns: tableColumns,
    showIndexColumn: false,
    showTableSetting: false,
    api: UserApi.getRegisterUserPage,
    formConfig: {
      labelWidth: 120,
      schemas: tableFormSchema,
    },
    actionColumn: getActionColumn(),
    beforeFetch: (arg) => handleFetchDateParams(arg),
  });
  onActivated(() => reload());

  const [registerModal, { openModal, closeModal }] = useModal();

  const authAccountType = computed(
    () => (type: number) => authAccountTypeList.find((find) => find.value === type)?.label,
  );

  function handleAdd() {
    openModal(true, {
      ifUpdate: false,
    });
  }
  function handleSuccess() {
    closeModal();
    reload();
  }
  function handleUpdatePassword(id: string) {
    openModal(true, {
      id,
      ifUpdate: true,
    });
  }
</script>

<style scoped lang="scss">
  :deep(.ant-table-thead > tr > th) {
    background: #fff;
  }
</style>
